<!DOCTYPE html>
<html>
<head>
	<title>颜色渐变</title>
	<style type="text/css">
		.box{width:80%;height:300px;margin:50px auto;}
		p{padding-left:10%;}
		.linear1{
			background: linear-gradient(top,#e54949 0%, #e59898 100%);
			background: -moz-linear-gradient(top,#e54949 0%,#e59898 100%);
			background: -webkit-linear-gradient(top,#e54949 0%,#e59898 100%);
			background: -o-linear-gradient(top,#e54949,#e59898 100%);
			background: -ms-linear-gradient(top,#e54949 0%,#e59898 100%);
		}
		.linear2{
			background: linear-gradient(to right,#e54949 0%,#e59898 100%);
			background: -moz-linear-gradient(right,#e54949 0%,#e59898 100%);
			background: -webkit-linear-gradient(to right,#e54949 0%,#e59898 100%);
			background: -o-linear-gradient(right, #e54949 0%,#e59898 100%);
			background: -ms-linear-gradient(right,#e54949 0%,#e59898 100%);
		}
		.linear3{
			background: linear-gradient(60deg,#e54949 0%,#e59898 100%);
			background: -moz-linear-gradient(60deg,#e54949 0%,#e59898 100%);
			background: -webkit-linear-gradient(60deg,#e54949 0%,#e59898 100%);
			background: -o-linear-gradient(60deg,#e54949 0%,#e59898 100%);
			background: -ms-linear-gradient(60deg,#e54949 0%,#e59898 100%);

		}
		.linear4{
				background:linear-gradient(90deg,#e54949 0%,#32a221 50%,#3392ec 100%);
		}
		.border1{
			/*border-width:4px;*/
			border:4px solid #dedede;
			border-radius: 10px;
			border-image: -webkit-linear-gradient( red , blue) 30 30;
			border-image: -moz-linear-gradient( red, blue) 30 30;
			border-image: linear-gradient( red , blue) 30 30;
		}
	</style>
</head>
<body>
<p>从上到下的红白色渐变</p>  
<div class="box linear1"></div>
<p>从左到右的红白色渐变</p>
<div class="box linear2"></div>
<p>45度的红白色渐变</p>
<div class="box linear3"></div>
<p>多种颜色渐变</p>
<div class="box linear4"></div>
<p>边框的渐变</p>
<div class="box border1"></div>
</body>
</html>